<template>
  <div class="reserve-period">
    <van-field
      :model-value="date"
      is-link
      readonly
      label="预约日期"
      @click="picker = true"
    />

    <div class="week"></div>

    <van-calendar v-model:show="picker" @confirm="onConfirm" />

    <div class="period-wrapper">
      <van-grid :column-num="3" :gutter="10">
        <van-grid-item
          v-for="item of reserveList"
          :key="item.id"
          :class="{ full: item.remainder === 0 }"
          @click="handleItemClick(item)"
        >
          <div class="item">
            <p class="range">
              {{ getTime(item.startTime) }} - {{ getTime(item.endTime) }}
            </p>
            <p class="tips">{{ item.remainder === 0 ? '已约满' : '可预约' }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="week">
      <span v-for="item in weekList" :key="item">{{ item }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Ref, ref, defineProps, watchEffect } from 'vue'
import { useDatePicker } from '/@/use/datePicker'
import dayjs from 'dayjs'
import { dateFormatter, getTime, getLaterDate } from '../utils'
import { useRouter } from 'vue-router'
import { publishQuery, getpublishQueryList } from '../api'
import { Reserve } from '../types'

type PropsType = { userId: string; tenantId: string }

const props = defineProps<PropsType>()

const date = ref(dayjs().format(dateFormatter))

const { onConfirm, picker } = useDatePicker(date)

const { handleItemClick, reserveList } = useItem(props, date)

function useItem(props: PropsType, date: Ref<string>) {
  const router = useRouter()
  const reserveList = ref<Reserve[]>([])

  // userId_equal  老师的id
  // deadline_le     当前日期时间
  // startTime_equal  当前日期

  const getData = async (date: string) => {
    const {
      data: { data },
    } = await publishQuery()
    reserveList.value = data
  }

  watchEffect(async () => {
    const params = {
      userId_equal: props.userId,
      tenantId_equal: props.tenantId,
      startTime: date.value,
    }
    const {
      data: { data },
    } = await publishQuery(params)
    reserveList.value = data
  })

  return {
    reserveList,
    handleItemClick(item: Reserve) {
      router.push({
        name: 'ReserveOrder',
        query: { id: item.id, tenantId: props.tenantId },
      })
    },
  }
}

let weekList = getWeekList()

const params = {
  beginDate: getLaterDate(1),
  endDate: getLaterDate(31),
  tenantId: props.tenantId,
  userId: props.userId,
}
getpublishQueryList(params).then((res) => {
  console.log(res.data.data)
  getMonthDate(res.data.data)
})

//获取后面7天的具体是星期几
function getWeekList() {
  let week = ['日', '一', '二', '三', '四', '五', '六']
  let weekList: string[] = []
  for (let i = 0; i < 7; i++) {
    weekList.push(
      week[
        parseInt(
          dayjs()
            .add(i + 1, 'day')
            .format('d')
        )
      ]
    )
  }
  return weekList
}

function getMonthDate(data: Record<string, any>) {
  let weeks: any = {}
  let date = Object.keys(data)

  for (let i in data) {
    if (!weeks[i.substring(0, 7)]) {
      weeks[i.substring(0, 7)] = {
        list: [],
        month: i.substring(0, 7),
      }
      let obj = {
        date: i,
        timeList: data[i],
      }
      weeks[i.substring(0, 7)].list.push(obj)
    } else {
      let obj = {
        date: i,
        timeList: data[i],
      }
      weeks[i.substring(0, 7)].list.push(obj)
    }
  }
}
</script>

<style lang="less" scoped>
.reserve-period {
  margin-bottom: 60px;

  .period-wrapper {
    margin-top: 20px;
  }

  /deep/ .van-grid-item__content {
    background: #3adbbc;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    p {
      margin: 2px;
    }
  }
  /deep/ .van-grid-item {
    &.full {
      .van-grid-item__content {
        color: #fd9fa1;
        background: #fff;
        border: 1px solid #fd9fa1;
      }
    }
  }

  .week {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 13px;
    padding: 10px;
  }
}
</style>
